<template>
    <pui-drawer ref="drawerRef" :show="false" title="组件浏览器" position="right">
        <div class="component-drawer-content">
            <div class="component-content">
                <div class="tree-content">
                    <pui-tree :show="true" :dataList="mainRef.treeList" @onNodeClick="treeItemclick" v-model="mainRef.selectedCompo"></pui-tree>
                </div>
                <div class="file-content">
                    <div class="parameter-tab"  v-show="mainRef.nowTabIndex === '0'">
                        <div class="file-info">
                            <div class="file-info-header file-info-item">
                                <span class="name">参数名称</span>
                                <span class="value">值</span>
                            </div>
                            <div class="category-list" v-for="item in mainRef.parameter" :key="item.val">
                                <div class="title">{{ item.category }}</div>
                                <div class="value file-info-item" v-for="parameter in item.parameters">
                                    <span class="name">{{parameter.attr}}</span>
                                    <span class="value">{{parameter.val}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="information-tab" v-show="mainRef.nowTabIndex === '1'">
                        <div class="file-info">
                            <div class="file-info-header file-info-item">
                                <span class="name">参数名称</span>
                                <span class="value">值</span>
                            </div>
                            <div class="file-info-item" v-for="item in mainRef.componentInfo" :key="item.val">
                                <span class="name">{{item.attr}}</span>
                                <span class="value">{{mainRef.selectedCompo[item.props]}}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <pui-tabs :tabList="mainRef.tabList" type="flex" @onClickHandle="tabClickHandle"></pui-tabs>
            </div>
        </div>
    </pui-drawer>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'resource-content'
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance } from 'vue'
import { graphManager } from '@/services/phot_client/graph';
const { proxy } = getCurrentInstance() as any
const mainRef = reactive({
    tabList: [
        {
            name: '组件参数',
            id: '0'
        },
        {
            name: '组件信息',
            id: '1'
        },
    ]as any[],
    treeList: [
        {
            label: 'PhotGraph',
            value: 'PhotGraph',
            children: [
                // {
                //     label: '单模单芯单偏振的光纤仿真系统',
                //     value: '0-1-1',
                // }
            ]
        }
    ] as any[],
    nowResource: [
    ] as any[],
    nowTabIndex: '0',
    componentInfo: [
        {
            attr: '名称',
            props: 'name',
            val: ''
        },
        {
            attr: 'ID',
            props: 'componentId',
            val: ''
        },
        {
            attr: '组件坐标',
            props: 'loc',
            val: ''
        },
        {
            attr: '描述信息',
            props: 'description',
            val: ''
        },
    ] as any,
    parameter: [] as any,
    selectedCompo: {} as any
})
const tabClickHandle = (e:any) => {
    mainRef.nowTabIndex = e.id
}
const treeItemclick = (e: any) => {
    console.log(e)
    if (e.parameters) {
        mainRef.parameter = []
        mainRef.selectedCompo = e.compo
        e.parameters.map((item: any) => {
            mainRef.parameter.push({
                attr: item.name,
                props: item.name,
                val: item.value
            })
        })
    }
}
const init = async () => {
    // console.log(graphManager.photGraph)
    proxy.$refs.drawerRef.componentRef.show = true
    mainRef.treeList = [
        {
            label: graphManager.photGraph.name,
            value: graphManager.photGraph.graphId,
            children: []
        }
    ]
    const components = await graphManager.getComponents()
    components.map((item: any) => {
        mainRef.treeList[0].children.push({
            label: item.name,
            value: item.componentId,
            compo: item,
            parameters: item.parameters
        })
        // mainRef.parameter.push({
        //     attr: item.name,
        //     props: item.name,
        //     val: item.value
        // })
    })
}
const clear = () => {
    mainRef.treeList = [
        {
            label: 'PhotGraph',
            value: 'PhotGraph',
            children: []
        }
    ]
    mainRef.treeList[0].children = []
    mainRef.componentInfo = []
    mainRef.parameter = []
}
const chooseCompo = (e: any) => {
    proxy.$refs.drawerRef.componentRef.show = true
    mainRef.parameter = []
    mainRef.selectedCompo = e
    console.log(e)
    for (const category in e.parameters) {
        const list = e.parameters[category]
        const parameters: any = []
        list.map((item: any) => {
            parameters.push({
                attr: item.name,
                props: item.name,
                val: item.value
            })
        })
        const parameter = {
            category,
            parameters
        }
        mainRef.parameter.push(parameter)
    }
}

defineExpose({
    init,
    clear,
    chooseCompo
})
</script>